<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  header  -->
    <div class="header">
      <span class="popup-name">{{ currentNode.name }}</span>
      <a-icon class="close-btn" type="close" @click="$emit('done')" />
    </div>
    <!--  body  -->
    <div class="description">
      <div v-if="currentNode.data.input.length > 0" class="prompt-message">
        请选择列
      </div>
      <div class="table-name-tips">
        <div class="table-name">
          <a-tooltip placement="top">
            <template slot="title">
              <span>
                节点名称：{{ currentNode.data.input[0].nodeName }}
                <br />
                表名：{{ currentNode.data.input[0].tableName }}
              </span>
            </template>
            <span class="name-text">
              {{ currentNode.data.input[0].nodeName }}
            </span>
          </a-tooltip>
        </div>
        <div class="table-name">
          <a-tooltip placement="top">
            <template slot="title">
              <span>
                节点名称：{{ currentNode.data.input[1].nodeName }}
                <br />
                表名：{{ currentNode.data.input[1].tableName }}
              </span>
            </template>
            <span class="name-text">
              {{ currentNode.data.input[1].nodeName }}
            </span>
          </a-tooltip>
        </div>
      </div>
      <div v-if="currentNode.data.input.length > 0" class="incidence-all">
        <!-- 左表  -->
        <div class="incidence-all-left incidence-left-right">
          <div class="incidence-item-column">
            <a-select v-model="left" class="incidence-column-select">
              <!-- 节点data.input 中是输入表名及字段 [0] 左表 -->
              <a-select-option
                v-for="(column1, index) in currentNode.data.input[0].tableCols"
                :key="'column1' + index"
                :value="column1"
                >{{ column1 }}</a-select-option
              >
            </a-select>
            <!-- 条件选择 -->
            <a-select v-model="operator" class="operator-select">
              <a-select-option :value="'='">=</a-select-option>
              <a-select-option :value="'!='">!=</a-select-option>
            </a-select>
          </div>
        </div>
        <!-- 右表  -->
        <div class="incidence-all-right incidence-left-right">
          <div class="incidence-item-column">
            <a-select v-model="right" class="incidence-column-select">
              <!-- 节点data.input 中是输入表名及字段 [1] 右表 -->
              <a-select-option
                v-for="(column2, index) in currentNode.data.input[1].tableCols"
                :key="'column2' + index"
                :value="column2"
                >{{ column2 }}</a-select-option
              >
            </a-select>
          </div>
        </div>
      </div>

      <div v-else>
        请选择父节点
      </div>
    </div>
    <!--  footer  -->
    <div class="buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="$emit('done')">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'

@Component
export default class EtlJoin extends Vue {
  @Prop({
    type: Object,
    default: () => {
      return {}
    },
  })
  currentNode!: any
  // 模式
  public mod: number = 1
  // 左表列
  public left: string = ''
  // 右表列
  public right: string = ''
  // 条件选择
  public operator: string = '='

  public created() {
    // 回显
    this.mod = this.currentNode.data.mod
    this.left = this.currentNode.data.left
    this.right = this.currentNode.data.right
    this.operator = this.currentNode.data.operator
  }

  public mounted() {
    // (document.querySelector('.overlay') as HTMLDivElement).addEventListener('click', this.closePopup)
  }

  public closePopup() {
    this.$emit('done')
  }

  public confirm() {
    this.$emit('confirm', {
      mod: this.mod,
      left: this.left,
      right: this.right,
      operator: this.operator,
    })
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/popup/setParams';

.set-params.window {
  height: 300px;
  width: 550px;
}
/* 内容 */
.description {
  font-size: 16px;
  height: calc(100% - 109px);
  overflow-y: auto;
  padding: 12px 24px 0;
  /*  */
  .prompt-message {
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 6px;
    width: 100%;
  }
  /* 模式 */
  .mode-radio-group {
    margin-bottom: 12px;
  }

  .table-name-tips {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    width: 100%;

    .table-name {
      display: flex;
      width: 150px;

      .name-text {
        color: #1e49f8;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }
    }
  }

  /* 关联关系 */
  .incidence-all {
    display: flex;
    justify-content: space-between;

    .incidence-all-left {
      width: 70%;
    }

    .incidence-all-right {
      width: 30%;
    }
    /* 左右选择框 */
    .incidence-left-right {
      display: flex;
      flex-direction: column;

      .incidence-item-column {
        align-items: center;
        display: flex;
        margin-bottom: 12px;
        width: 100%;
        /* 列选择 */
        .incidence-column-select {
          height: 32px;
          width: 150px;
        }
        /* 条件选择 */
        .operator-select {
          height: 32px;
          margin-left: 24px;
          width: 150px;
        }
      }
    }
  }
}
</style>
